<template>
    <div>
        <div class="vs-table-box">
            <div class="flex jc-sb" v-if="status != 3">
                <el-radio-group v-model="radio1">
                    <el-radio-button label="要货单详情"></el-radio-button>
                    <el-radio-button label="入库记录"></el-radio-button>
                </el-radio-group>
                <!-- <el-button type="primary" style="margin-left:auto">打印</el-button> -->
            </div>
            <div v-if="status == 3" style="margin-left: 60px">
                <h4 style="color: red; border: 1px solid #e4e7ed; padding: 10px 20px">已取消</h4>
                <el-descriptions border style="margin-top: 20px">
                    <el-descriptions-item label="取消时间">{{ detail.cancel.create_time }}</el-descriptions-item>
                    <el-descriptions-item label="取消原因">{{ detail.cancel.content }}</el-descriptions-item>
                </el-descriptions>
            </div>
            <el-form v-loading="loading" ref="ruleForm" label-position="right" :rules="rules" class="orm-info" label-width="140px" :model="ruleForm" style="margin-top: 20px" v-if="radio1 == '要货单详情'">
                <div style="margin-left: 60px">
                    <el-descriptions border style="margin-bottom: 20px">
                        <el-descriptions-item label="要货单号">{{ detail.number }}</el-descriptions-item>
                        <el-descriptions-item label="要货门店">{{ detail.store.title }}</el-descriptions-item>
                        <el-descriptions-item label="账户余额">{{ detail.store.advance_money }}元</el-descriptions-item>
                        <el-descriptions-item label="要货类型">{{ take_ticket_type == 3 ? '洗护用品' : '其他' }}</el-descriptions-item>
                        <el-descriptions-item label="申请时间">{{ detail.create_time }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ detail.remarks }}</el-descriptions-item>
                    </el-descriptions>
                    <el-table :data="detail.info" border style="width: 100%" show-summary :summary-method="getSummaries">
                        <el-table-column prop="id" label="序号" align="center" width="100"> </el-table-column>
                        <el-table-column prop="goods_number" label="商品编码" align="center"> </el-table-column>
                        <el-table-column prop="goods_name" label="商品系列" align="center"> </el-table-column>
                        <el-table-column prop="spce" label="规格" align="center"> </el-table-column>
                        <el-table-column prop="unit" label="单位" align="center"> </el-table-column>
                        <el-table-column prop="store_stock_quantity" label="库存" align="center"> </el-table-column>
                        <el-table-column prop="quantity" label="要货数量" align="center"> </el-table-column>
                        <el-table-column v-if="utils.getIsShopowner()" prop="price_sum" label="要货金额" align="center"> </el-table-column>
                        <el-table-column prop="remarks" label="备注" align="center"> </el-table-column>
                    </el-table>
                </div>
            </el-form>
            <el-form v-loading="loading" ref="ruleForm" label-position="right" :rules="rules" class="orm-info" :model="ruleForm" v-else>
                <div style="margin-left: 60px">
                    <h4 style="color: red; border: 1px solid #e4e7ed; padding: 10px 20px" v-if="status == -1">已下单，待总后台发货</h4>
                    <h4 style="color: red; border: 1px solid #e4e7ed; padding: 10px 20px" v-else-if="status == 0">待入库</h4>
                    <h4 style="color: red; border: 1px solid #e4e7ed; padding: 10px 20px" v-else-if="status == 1">
                        已入库
                        <template v-if="detail.logistics">
                            <template v-if="detail.logistics.type == 1">
                                <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100"
                                    >快递公司：
                                    {{ detail.logistics.company }}
                                </span>
                                <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100">快递单号： {{ detail.logistics.number }}</span>
                                <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100"
                                    >发货时间：
                                    {{ detail.logistics.create_time.slice(0, 16) }}
                                </span>
                            </template>
                            <template v-else>
                                <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100">物流方式： 自提 </span>
                            </template>
                        </template>
                        <template v-else>
                            <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100">快递公司：暂无物流信息</span>
                            <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100">快递单号：暂无物流信息</span>
                            <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100">发货时间：暂无物流信息</span>
                        </template>
                    </h4>
                    <h4 style="color: red; border: 1px solid #e4e7ed; padding: 10px 20px" v-else-if="status == 2">
                        部分入库
                        <template v-if="detail.logistics">
                            <template v-if="detail.logistics.type == 1">
                                <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100"
                                    >快递公司：
                                    {{ detail.logistics.company }}
                                </span>
                                <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100">快递单号： {{ detail.logistics.number }}</span>
                                <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100"
                                    >发货时间：
                                    {{ detail.logistics.create_time.slice(0, 16) }}
                                </span>
                            </template>
                            <template v-else>
                                <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100">物流方式： 自提 </span>
                            </template>
                        </template>
                        <template v-else>
                            <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100">快递公司：暂无物流信息</span>
                            <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100">快递单号：暂无物流信息</span>
                            <span style="font-size: 14px; color: #9d9d9d; margin-left: 50px; font-weight: 100">发货时间：暂无物流信息</span>
                        </template>
                    </h4>
                    <h4 style="color: red; border: 1px solid #e4e7ed; padding: 10px 20px" v-if="status == 4">已完成</h4>
                    <h4 style="border: 1px solid #e4e7ed; padding: 10px 20px" v-if="status == 0 || status == 2">待入库商品清单</h4>
                    <h4 style="border: 1px solid #e4e7ed; padding: 10px 20px" v-else-if="status == 1 || status == 4">入库记录</h4>
                    <template v-if="status == 0 || status == 2">
                        <el-descriptions border style="margin-bottom: 20px">
                            <el-descriptions-item label="要货单号">{{ detail.number }}</el-descriptions-item>
                            <el-descriptions-item label="要货门店">{{ detail.store.title }}</el-descriptions-item>
                            <el-descriptions-item label="商品类型" v-if="detail.type == 1">{{ detail.two_type == 1 ? '定制毛坯' : '定制成品' }}</el-descriptions-item>
                            <el-descriptions-item label="商品类型" v-if="detail.type == 2">{{ detail.two_type == 1 ? '标准毛坯' : '标准成品' }}</el-descriptions-item>
                            <el-descriptions-item label="商品类型" v-if="detail.type == 3 || detail.type == 4">{{ detail.type == 3 ? '洗护用品' : '其他' }}</el-descriptions-item>
                            <el-descriptions-item label="申请时间">{{ detail.create_time }}</el-descriptions-item>
                            <el-descriptions-item label="备注">{{ detail.remarks }}</el-descriptions-item>
                        </el-descriptions>
                        <el-table :data="detail.info" border style="width: 100%" key="1" show-summary :summary-method="getSummaries">
                            <el-table-column prop="id" label="序号" align="center" width="100"> </el-table-column>
                            <el-table-column prop="goods_number" label="商品编码" align="center"> </el-table-column>
                            <el-table-column prop="goods_name" label="商品系列" align="center"> </el-table-column>
                            <el-table-column prop="spce" label="规格" align="center"> </el-table-column>
                            <el-table-column prop="unit" label="单位" align="center"> </el-table-column>
                            <el-table-column prop="quantity" label="要货数量" align="center"> </el-table-column>
                            <el-table-column v-if="utils.getIsShopowner()" prop="price_sum" label="要货金额" align="center"> </el-table-column>
                            <el-table-column prop="store_stock_quantity" label="已入库数" align="center" width="100"> </el-table-column>
                            <el-table-column prop="send_quantity_now" label="本次入库" align="center" width="100">
                                <template slot-scope="scope">
                                    <el-input @blur="quantityBlur($event, scope.$index)" oninput="value=value.replace(/[^\d]/g,'')" v-model.number="scope.row.send_quantity_now" type="number"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="oldNum" label="待入库数量" align="center" width="100"></el-table-column>
                            <!-- <el-table-column prop="send_price" label="发货金额" align="center"> </el-table-column> -->
                            <el-table-column label="入库备注" align="center" width="100">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.remark"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- <el-form-item label="是否提前完成订单：">
                            <el-radio-group v-model="logistics.is_advance">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注：">
                            <el-input type="textarea" v-model="logistics.remarks" placeholder="" style="width:500px"></el-input>
                        </el-form-item> -->
                    </template>
                    <div class="vs-bottom-btns" v-if="status == 2">
                        <el-button @click="utils.backPage()">返回</el-button>
                        <el-button @click="send" :loading="isBtn" type="primary" v-if="radio1 == '入库记录' && (status == 0 || status == 2)">入库</el-button>
                    </div>
                    <h4 style="border: 1px solid #e4e7ed; padding: 10px 20px" v-if="status == 2">入库记录</h4>
                    <template v-if="status == 1 || status == 2 || status == 4">
                        <el-descriptions border style="margin-bottom: 20px">
                            <!-- <el-descriptions-item label="入库单号">果冻</el-descriptions-item> -->
                            <el-descriptions-item label="关联要货单号">{{ detail.number }}</el-descriptions-item>
                            <el-descriptions-item label="要货门店">{{ detail.store.title }}</el-descriptions-item>
                            <el-descriptions-item label="商品类型">{{ take_ticket_type == 3 ? '洗护用品' : '其他' }}</el-descriptions-item>
                            <el-descriptions-item label="申请时间">{{ detail.create_time }}</el-descriptions-item>
                            <el-descriptions-item label="备注">{{ detail.remarks }}</el-descriptions-item>
                        </el-descriptions>
                        <el-table :data="detail.other" border style="width: 100%">
                            <el-table-column prop="id" label="序号" align="center" width="100"> </el-table-column>
                            <el-table-column prop="goods_number" label="商品编码" align="center"> </el-table-column>
                            <el-table-column prop="goods_name" label="商品系列" align="center"> </el-table-column>
                            <el-table-column prop="spce" label="规格" align="center"> </el-table-column>
                            <el-table-column prop="unit" label="单位" align="center"> </el-table-column>
                            <el-table-column prop="quantity" label="要货数量" align="center"> </el-table-column>
                            <el-table-column v-if="utils.getIsShopowner()" prop="price" label="要货金额" align="center"> </el-table-column>
                            <el-table-column prop="store_stock_quantity" label="已入库数" align="center" width="100"></el-table-column>
                            <el-table-column prop="oldNum" label="待入库数" align="center" width="100"></el-table-column>
                            <el-table-column prop="remarks" label="备注" align="center"> </el-table-column>
                        </el-table>
                        <el-descriptions border style="margin-top: 20px" title="操作信息">
                            <el-descriptions-item label="快递公司">{{ detail.logistics.company }}</el-descriptions-item>
                            <el-descriptions-item label="快递单号">{{ detail.logistics.number }}</el-descriptions-item>
                            <el-descriptions-item label="入库时间">{{ detail.logistics.create_time }}</el-descriptions-item>
                            <el-descriptions-item label="入库日期">{{ detail.logistics.create_time }}</el-descriptions-item>
                        </el-descriptions>
                    </template>
                </div>
            </el-form>
            <div class="vs-bottom-btns" v-if="status != 2">
                <el-button @click="utils.backPage()">返回</el-button>
                <el-button @click="send" :loading="isBtn" type="primary" v-if="radio1 == '入库记录' && (status == 0 || status == 2)">入库</el-button>
            </div>
        </div>
        <el-dialog :visible.sync="dialogDeliver" width="30%" title="填写物流信息" destroy-on-close @close="logisticsFormClose">
            <el-form :model="logistics" :rules="rules" ref="logistics" inline>
                <el-form-item label="配送方式">
                    <el-radio-group v-model="logistics.logistics_type">
                        <el-radio :label="1">物流</el-radio>
                        <el-radio :label="2">自提</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div v-if="logistics.logistics_type == 1">
                    <el-form-item label="物流公司" prop="logistics_company">
                        <el-input v-model="logistics.logistics_company" placeholder="请输入物流公司" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="物流单号" prop="logistics_number">
                        <el-input v-model="logistics.logistics_number" placeholder="请输入物流单号" style="width: 200px"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="备注" v-else>
                    <el-input v-model="logistics.logistics_remarks" placeholder="请输入备注" type="textarea" style="width: 400px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="logisticsFormClose">取 消</el-button>
                <el-button type="primary" @click="logisticsFormSure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                take_ticket_type: 3,

                radio1: '要货单详情',
                status: 0, //0待入库1已入库2部分入库3已取消4已完成
                loading: false,
                dialogDeliver: false,
                logistics: {
                    is_advance: 1,
                    remarks: '',
                    logistics_type: 1,
                    logistics_company: '',
                    logistics_number: '',
                    logistics_remarks: '',
                },
                tableData: [{}],
                type: 1,
                shopList: [
                    { label: '虹桥店', value: 0 },
                    { label: '青浦店', value: 1 },
                ],
                isBtn: false,
                ruleForm: {
                    room_number: '', //房间号
                    tech_num: '', //可容纳技师数
                    customer_num: '', //	可容纳客户数
                    sort: '',
                    beds: [
                        {
                            number: '',
                            type: '',
                        },
                    ],
                    imgList: '',
                    status: '0',
                    page: 1,
                    limit: 1,
                    total: 0,
                    tiqian: 0,
                    remark: '',
                },
                rules: {
                    logistics_company: [{ required: true, message: '请输入物流公司', trigger: 'blur' }],
                    logistics_number: [{ required: true, message: '请输入物流单号', trigger: 'blur' }],
                },
                detail: {
                    store: {},
                    info: [],
                    logistics: {},
                    ordinary: [],
                    cancel: {},
                },
            };
        },
        created() {
            let { id, type } = this.$route.query;
            if (id) {
                this.take_ticket_type = type;
                this.getRoom(id);
            }
        },
        methods: {
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index == 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map((item) => Number(item[column.property]));
                    if (column.property == 'price' || column.property == 'price_sum') {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] = sums[index].toFixed(2);
                    } else if (column.property == 'store_stock_quantity' || column.property == 'quantity' || column.property == 'send_quantity_now' || column.property == 'oldNum') {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                    }
                });
                return sums;
            },
            remittanceList(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index == 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map((item) => Number(item[column.property]));
                    if (column.property == 'store_stock_quantity' || column.property == 'quantity' || column.property == 'price') {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                    } else {
                        sums[index] = '';
                    }
                });
                return sums;
            },
            quantityBlur(e, i) {
                let num = this.detail.info[i].send_quantity_now;
                if (num > this.detail.info[i].oldNum) {
                    num = this.detail.info[i].oldNum;
                } else if (num <= 1) {
                    num = 1;
                }
                this.detail.info[i].send_quantity_now = parseInt(num);
            },
            async logisticsFormSure() {
                this.$refs['logistics'].validate(async (valid) => {
                    if (!valid) return;
                    this.logistics.take_ticket_id = this.$route.query.id;
                    let arr = [];
                    for (let i in this.detail.info) {
                        arr.push({ id: this.detail.info[i].id, send_quantity: this.detail.info[i].send_quantity_now, send_price: this.detail.info[i].send_price });
                    }
                    this.logistics.goods = JSON.stringify(arr);
                    console.log(this.logistics);
                    let { code, data } = await this.$Http.ordinarySend(this.logistics);
                    if (code) {
                        this.dialogDeliver = false;
                        this.utils.backPage();
                        this.$message.success('入库成功!');
                    }
                });
            },
            //关闭物流弹框
            logisticsFormClose() {
                this.dialogDeliver = false;
                this.logistics.logistics_type = 1;
                this.logistics.logistics_company = '';
                this.logistics.logistics_number = '';
                this.logistics.logistics_remarks = '';
            },
            send() {
                this.$confirm('是否确认入库', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(async () => {
                        let falg = false;
                        let goods_info = [];
                        for (let i in this.detail.info) {
                            let item = this.detail.info[i];
                            if (item.send_quantity_now) {
                                falg = true;
                                goods_info.push({
                                    id: item.id,
                                    count: item.send_quantity_now,
                                    remark: item.remark,
                                });
                            }
                        }
                        if (!falg) {
                            return this.$message.warning('请输入入库数量');
                        }
                        let parms = {
                            take_ticket_id: this.$route.query.id,
                            goods_info: JSON.stringify(goods_info),
                        };
                        console.log(parms);
                        let { code } = await this.$Http.otherStock(parms);
                        if (code) {
                            this.$message.success('操作成功');
                            this.getRoom(this.$route.query.id);
                        }
                    })
                    .catch(() => {});
            },
            async getRoom(id) {
                this.loading = true;
                let { code, data } = await this.$Http.other({ id, take_ticket_type: this.take_ticket_type }); //洗护/其他
                this.loading = false;
                if (code) {
                    if(typeof data.info=="string"){
                        data.info = JSON.parse(data.info)
                    }
                    this.detail = data;
                    switch (this.detail.status) {
                        case 0:
                            this.status = -1;
                            break;
                        case 1:
                            this.status = 0;
                            break;
                        case 2:
                            this.status = 2;
                            break;
                        case 3:
                            this.status = 1;
                            break;
                        case 7:
                            this.status = 3;
                            break;
                        case 9:
                            this.status = 4;
                            break;
                    }
                    for (let i in this.detail.info) {
                        this.detail.info[i].send_quantity = this.detail.info[i].send_quantity || 0;
                        this.detail.info[i].store_stock_quantity = this.detail.info[i].store_stock_quantity || 0;
                        this.$set(this.detail.info[i], 'send_quantity_now', '');
                        this.$set(this.detail.info[i], 'remark', '');
                        this.$set(this.detail.info[i], 'oldNum', this.detail.info[i].quantity * 1 - this.detail.info[i].store_stock_quantity);
                    }
                    for (let i in this.detail.other) {
                        this.$set(this.detail.other[i], 'oldNum', this.detail.other[i].quantity * 1 - this.detail.other[i].store_stock_quantity * 1);
                    }
                }
            },
            subitm() {
                this.$refs['ruleForm'].validate(async (valid) => {
                    if (!valid) return;
                    let obj = Object.assign({}, this.ruleForm);
                    obj.beds = JSON.stringify(obj.beds);
                    this.isBtn = true;
                    let { code, data } = await this.$Http.setRoom(obj);
                    this.isBtn = false;
                    if (code) {
                        this.utils.backPage();
                        this.$message.success(obj.id ? '修改成功!' : '添加成功!');
                    }
                });
            },
        },
    };
</script>
<style>
    .disabled .el-upload--picture-card {
        display: none !important;
    }
</style>
<style lang="scss" scoped></style>
